<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <meta charset="UTF-8">
    <script type="text/javascript" th:src="@{${session.baseUrl}+'js/common.js'}"></script>
    <script th:src="@{${session.baseUrl}+'js/jquery.js'}"></script>
    <link th:href="@{${session.baseUrl}+'style/reset.css'}" rel="stylesheet" type="text/css">
    <link th:href="@{${session.baseUrl}+'style/base.css'}" rel="stylesheet" type="text/css">
    <link th:href="@{${session.baseUrl}+'style/header.css'}" rel="stylesheet" type="text/css">
    <link th:href="@{${session.baseUrl}+'style/dialog.css'}" rel="stylesheet" type="text/css">
    <link th:href="@{${session.baseUrl}+'style/global.css'}" rel="stylesheet" type="text/css">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script th:src="@{${session.baseUrl}+'js/dialog.js'}"></script>
    <script type="text/javascript">


        $.fn.ImgZoomIn = function () {

            bgstr = '<div id="ImgZoomInBG" style=" background:#000000; filter:Alpha(Opacity=70); opacity:0.7; position:fixed; left:0; top:0; z-index:10000; width:100%; height:100%; display:none;"><iframe src="about:blank" frameborder="5px" scrolling="yes" style="width:100%; height:100%;"></iframe></div>';

            imgstr = '<img id="ImgZoomInImage" src="' + $(this).attr('src') + '" onclick=$(\'#ImgZoomInImage\').hide();$(\'#ImgZoomInBG\').hide(); style="cursor:pointer; display:none; position:absolute; z-index:10001;height: auto;width: 100%;" />';
            if ($('#ImgZoomInBG').length < 1) {
                $('body').append(bgstr);
            }
            if ($('#ImgZoomInImage').length < 1) {
                $('body').append(imgstr);
            }
            else {
                $('#ImgZoomInImage').attr('src', $(this).attr('src'));
            }

            $('#ImgZoomInImage').css('left', $(window).scrollLeft() );
            $('#ImgZoomInImage').css('top', $(window).scrollTop() + ($(window).height() - $('#ImgZoomInImage').height()) / 2);
            $('#ImgZoomInBG').show();
            $('#ImgZoomInImage').show();
        };

        $(document).ready(function () {
            $("#imgTest1").bind("click", function () {
                $(this).ImgZoomIn();
            });
            $("#imgTest2").bind("click", function () {
                $(this).ImgZoomIn();
            });
            $("#imgTest3").bind("click", function () {
                $(this).ImgZoomIn();
            });
        });
    </script>
    <link rel="stylesheet" th:href="@{${session.baseUrl}+'style/projectDetail.css'}"/>
    <title>详情</title>
    <style>
        .btn-block {
            position: fixed;

            height: 6%;
            width: 100%;
            bottom: 0.0rem;
            background-color: #2888e5;
            font-size: 0.32rem;
            color: #fff;
            border-radius: 0.1rem;
            align-items: center;

        }

        .header {
            position: fixed;
            width: 100%;
            z-index: 99;
            text-align: center;
            line-height: 0.88rem;
            height: 0.88rem;
            font-size: 0.32rem;
            color: #fff;
            background: #2d9cff;
            top: 0;
        }

        .btn-block1 {
            position: fixed;
            height: 6%;
            width: 100%;
            bottom: 0.0rem;
            background-color: #888888;
            font-size: 0.32rem;
            color: #575757;
            border-radius: 0.1rem;
            align-items: center;
        }

        #pmsg {
            line-height: 0.3rem;
            font-size: 0.9rem;
            margin-left: 3.4rem;
            padding-bottom: 0.3rem;

        }

        .exampleImg {

            cursor: pointer;
        }

    </style>
</head>
<body >
<header class="header"><span onclick="javascript:history.go(-1)"></span>项目详情</header>

<input id="projectId" type="hidden" th:value="${drafts.id}">
<input type="hidden" th:value="${drafts.status}">
<input id="memberId" type="hidden" th:value="${session.memberId}">

<i th:if="${drafts.type==0}"><img th:src="@{${session.baseUrl}+'images/projectDetail/mingxing.png'}" alt=""
                                  style="width: 100%;height: 3.8rem;"/></i>
<i th:if="${drafts.type==1}"><img th:src="@{${session.baseUrl}+'images/projectDetail/youxiu.png'}" alt=""
                                  style="width: 100%;height: 3.8rem;"/></i>
<i th:if="${drafts.type==2}"><img th:src="@{${session.baseUrl}+'images/projectDetail/xingjiabi.png'}" alt=""
                                  style="width: 100%;height: 3.8rem;"/></i>
<i class="f30 title" th:text="${drafts.name}"></i>
<p>&nbsp;</p>
<ul id="intro">
    <li><b>进度：</b></li>
    <li class="parent">
        <div class="child"></div>
    </li>
    <li class="df jcsb pt30 lh50"><b>参与人数</b><b th:text="${renshu}+'人'"></b></li>
    <li class="df jcsb pt30 lh50"><b>已投金额</b><b id="money" th:text="'￥'+${drafts.currentTotal}"></b></li>
    <li class="df jcsb pt30 lh50"><b>计息方式</b><b th:text="${drafts.calculatedInterestType==0}?'按额计息':'按天计息'"></b></li>

    <li class="df jcsb pt30 lh50"><b>目标金额</b><b id="target" th:text="'￥'+${drafts.totalMoney}"></b></li>
    <li class="df jcsb pt30 lh50"><b>年化利率</b><span style="font-size: 0.4rem;color: red;font-weight: bold"
                                                   th:text="${#numbers.formatDecimal(100*drafts.rate,1,2)}+'%'"></span>
    </li>
    <li class="df jcsb pt30 lh50"><b>项目状态</b>
        <b th:if="${drafts.status==0}">预热中</b>
        <b th:if="${drafts.status==1}">认购中</b>
        <b th:if="${drafts.status==2}">认购结束</b>
    </li>
    <li class="df jcsb pt30 lh50" th:if="${drafts.status!=0}"><b>项目期限</b><b th:text="${drafts.dayNum}+'天'"></b></li>
    <li class="df jcsb pt30 lh50" th:if="${drafts.status==0}"><b>预热剩余天数</b><b th:text="${yureDay}+'天'"></b></li>
    <li class="df jcsb pt30 lh50"><b>项目认购开始时间</b><b th:text="${#dates.format(drafts.investmentStartTime,'yyyy-MM-dd')}"></b></li>
    <li class="df jcsb pt30 lh50"><b>项目收益结算时间</b><b th:text="${#dates.format(drafts.earningsEndTime,'yyyy-MM-dd')}"></b></li>
</ul>
<div th:if="${session.memberId==null}">
    <div style="margin-left: 10px;margin-top: 30px;color: #ff4848;height: 100px;text-align: center"><span style="font-size: larger">完成实名认证可查看项目详情！</span>
        <a href="/wap/mine.html" th:href="@{/wap/mine.html}" style="color: #2940ff;text-decoration: underline;">去登录</a>
    </div>
</div>
<div th:if="${session.memberId!=null&&memberUser.identified==0}">
    <div style="margin-left: 10px;margin-top: 30px;color: #ff4848;height: 100px;text-align: center"><span style="font-size: larger">完成实名认证可查看项目详情！</span>
        <a href="/wap/idIdentify.html" th:href="@{/wap/idIdentify.html}" style="color: #2940ff;text-decoration: underline;">去认证</a>
    </div>
</div>
<div th:if="${session.memberId!=null&&memberUser.identified==1}">
<ul class="detail">
    <li>详情介绍</li>
</ul>
<ul class="pb20" style="border-bottom: 0.2rem solid #f2f2f2;">
    <li>
        <div style="width: 2.5rem;height: 1rem;margin-left: 1rem;" th:if="${drafts.imgOne!=null&&drafts.imgOne!=''}">
            <img class="exampleImg" th:src="${drafts.imgOne}" id="imgTest1" style="height: 100%;width: 100%"/>
        </div>
        <div style="width: 2.5rem;height: 1rem;margin-left: 4rem;margin-top: -1rem" th:if="${drafts.imgTwo!=null&&drafts.imgOne!=null&&drafts.imgTwo!=''&&drafts.imgOne!=''}">
            <img class="exampleImg" th:src="${drafts.imgTwo}" id="imgTest2" style="height: 100%;width: 100%"/>
        </div>
        <div style="width: 2.5rem;height: 1rem;margin-left: 2.5rem;" th:if="${drafts.imgTwo!=null&&drafts.imgTwo!=''&&(drafts.imgOne==null||drafts.imgOne=='')}">
            <img class="exampleImg" th:src="${drafts.imgTwo}" id="imgTest3" style="height: 100%;width: 100%"/>
        </div>
    </li>

    <li class=" pl30 pr30 pt30 pb30" id="info" th:text="${drafts.projectIntro}">

    </li>
</ul>

<ul class="detail">
    <li>收益介绍</li>
</ul>
<ul class="pb20" style="border-bottom: 0.2rem solid #f2f2f2;">
    <li class=" pl30 pr30 pt30 pb30" id="shouyi" th:text="${drafts.projectEarningsIntrox}">

    </li>
</ul>

<ul class="detail">
    <li>风险介绍</li>
</ul>
<div class="pb20" style="border-bottom: 0.2rem solid #f2f2f2;">
    <div class=" pl30 pr30 pt30 pb30" id="fengxian" th:text="${drafts.projectRisk}">

    </div>
</div>

<ul class="detail">
    <li>参与投资人</li>
</ul>
<ul id="comment">
    <li class="df pl30 pr30 pt30 pb30" th:each="user,iterStat:${users}" th:if="${iterStat.count}<=3">
        <div style="width:0.9rem; height:0.9rem; border-radius:100%; overflow:hidden;">
            <img th:src="${user.head}" alt="" style="width: 0.9rem;height: 0.9rem;"/>
        </div>

        <div class="ml20">
            <p class="f26" th:text="${user.name}"></p>
            <p>&nbsp;</p>
            <p class="f22 g9" th:text="'E-Mail：'+${user.infoV}"></p>
        </div>
    </li>
    <li style="border-bottom: 0.8rem solid #f2f2f2;">
        <p id="pmsg">...</p>
    </li>
</ul>

</div>
</body>
<footer>
    <span th:if="${drafts.status==1}">
        <span th:if="${session.memberId!=null}">
            <a th:href="@{/wap/memberOrder.html/tomessage/(projectId=${drafts.id})}">
                <button type="button" class="btn-block" style="z-index:9999;">购买</button>
            </a>
        </span>
        <span th:if="${session.memberId==null}">
            <button type="button" class="btn-block" onclick="tologin(this)" style="z-index:9999;">购买</button>
        </span>
    </span>
    <span th:if="${drafts.status==0}">
        <span th:if="${session.memberId!=null}">
            <button type="button" class="btn-block" th:text="${collect==1}?'收藏':'您已收藏'" style="z-index:9999;"
                    onclick="collect(this)"></button>
        </span>
        <span th:if="${session.memberId==null}">
            <button type="button" class="btn-block" style="z-index:9999;" onclick="tologin(this)">收藏</button>
        </span>
    </span>
    <span th:if="${drafts.status==2}"> <button type="button" class="btn-block1" disabled="disabled"
                                               style="z-index:9999;">认购额已满</button></span>
    <span th:if="${drafts.status==3}"> <button type="button" class="btn-block1" disabled="disabled"
                                               style="z-index:9999;">项目已结束</button></span>
</footer>
<script type="text/javascript" th:inline="javascript">
    var basePath = /*[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]*/;

   /* function init() {
        var strinfo = '';

        strinfo = [[${drafts.projectIntro}]];
        $("#info").append(strinfo); //动态加载插入HTML

        var strshouyi = '';
        strshouyi = [[${drafts.projectEarningsIntrox}]];
        $("#shouyi").append(strshouyi); //动态加载插入HTML

        var strfengxian = '';
        strfengxian = [[${drafts.projectRisk}]];
        $("#fengxian").append(strfengxian); //动态加载插入HTML


    }*/


    /**
     * 未登录提示弹窗
     */
    function tologin(obj) {
        $('body').dailog({type: 'warning', title: '未登录', discription: '请您先登录'});
        self.setInterval(function () {
            location.reload();
        }, 3000)
    }


    /**
     * 收藏
     */
    function collect(_this) {
        var memberId = $("#memberId").val();
        if (memberId == null || memberId == '') {
            $('body').dailog({type: 'warning', title: '未登录', discription: '请您先登录'});
            self.setInterval(function () {
                location.reload();
            }, 3000) //这里3000代表3秒
        } else {
            var btn = $(_this);
            var shoucang = btn.html();
            if (shoucang == '收藏') {
                $.ajax({
                    url: basePath + "/wap/memberCollect.html/add",
                    contentType: 'application/json',
                    type: "POST",
                    dataType: "json",
                    data: JSON.stringify({
                        memberId: $('#memberId').val(),
                        projectId: $('#projectId').val(),
                    }),
                    success: function (e) {
                        if (e.data) {
                            $('body').dailog({type: 'success', title: '收藏', discription: '收藏成功'});
                            self.setInterval(function () {
                                location.reload();
                            }, 3000)
                        } else {
                            $('body').dailog({type: 'warning', title: '收藏', discription: '您已收藏该项目'});
                            self.setInterval(function () {
                                location.reload();
                            }, 3000) //这里3000代表3秒
                        }
                    }
                })
            } else {
                $('body').dailog({type: 'warning', title: '收藏', discription: '您已收藏该项目'});
                self.setInterval(function () {
                    location.reload();
                }, 3000) //这里3000代表3秒
            }
        }
    }


    $(function () {
        var money = $("#money").html();
        var target = $("#target").html();
        money = money.slice(money.indexOf('￥') + 1);
        target = target.slice(target.indexOf('￥') + 1);
        console.log(money);
        console.log(target);
        $(".child").css("width", parseInt(money) / parseInt(target) * 100 + '%')


        if (money == 0) {
            $("#support").css("background", "#aaa");
        }
    });

</script>
</html>